<template>
  <page-form :x-uri="uri" :bind-data="datas" :custom-components="custom" :bind-rules="rules" :bind-submit="submit" :disable-submit-btn="disableSubmitBtn">
    <!-- 自定义tab -->
    <template v-slot:page-tabs>
      <tabs :tabs="tabs" />
    </template>
  </page-form>
</template>

<script>
import PageForm from '@public/template/page_form.vue';
import ChooseImage from '@/pages/material/choose/image.vue';
import SwiperImage from '@/pages/material/choose/swiper.vue';
import { mapState } from 'vuex';
import Tabs from './tabs';
export default {
  components: {
    PageForm,
    Tabs
  },
  data() {
    return {
      uri: '/mall/admin/product/create',
      tabs: [
        {
          title: '新建商品',
          uri: '/mall/product/create',
          meta: {
            permission: 'school.create'
          }
        }
      ],
      datas: {
        status: 1,
        cover: 0
      },
      custom: {
        cover: ChooseImage,
        swiper: SwiperImage
      },
      rules: {
        cover: [{ required: true, message: '请选择封面', trigger: ['blur', 'change'] }]
      },
      disableSubmitBtn: false
    };
  },
  computed: {
    ...mapState('pageForm', {
      pageData: 'responseData'
    })
  },
  methods: {
    submit: function(datas) {
      this.$http.send(
        this.pageData.saveMethod,
        this.pageData.savePostUrl,
        datas,
        response => {
          this.$message.success(response.msg, _ => {
            this.$router.push({ path: '/mall/product/list' });
          });
        },
        response => {
          this.disableSubmitBtn = false;
          this.$message.error(response.msg);
        }
      );
    }
  }
};
</script>
